<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function () {
            /*             if (/chrome/i.test(window.navigator.userAgent))
                            alert("我是谷歌"); */

            let count = document.getElementById("count");
            let seconds = 0;

            /*             function timeCounter() {
                            count.innerHTML = seconds++;
                            if (seconds == 11) {
                                clearInterval(timer);
                            }
                        }
                        let timer = setInterval(timeCounter, 1000);
             */

            let timer = setTimeout(timeCounter, 1000);
            function timeCounter() {
                seconds++;
                count.innerHTML = seconds;
                if (seconds != 10) {
                    setTimeout(timeCounter, 1000);
                }
            }


            let picArr = ['images/1/1.jpg', 'images/1/2.jpg', 'images/1/3.jpg', 'images/1/4.jpg', 'images/1/5.jpg'];
            let pic = document.getElementById("pic");
            let btn1 = document.getElementById("btn1");
            let btn2 = document.getElementById("btn2");
            let index = 0;
            pic.src = picArr[index];
            let switcher;
            function picSwitcher() {
                index++;
                index = index % picArr.length;
                pic.src = picArr[index];
                /*                 if (index >= picArr.length) {
                                    index = 0;
                                } */
                console.log(index);
                // <5时，取模为本身；=5时，取模为0
            }
            btn1.onclick = function () {
                clearInterval(switcher);    //开启新定时器前先关闭上一个定时器
                switcher = setInterval(picSwitcher, 1000);
            }
            btn2.onclick = function () {
                clearInterval(switcher);
            }
        }
    </script>
</head>

<body>
    <h1 id="count">0</h1>
    <div>
        <img src="" alt="" id="pic">
        <button id="btn1">start</button>
        <button id="btn2">end</button>
    </div>
</body>

</html>